<template>
    <el-main>
        <!--    搜索栏-->
        <el-form ref="searchForm" label-width="80px" size="small" style="display: flex">
            <el-form-item label="问卷标题">
                <el-input v-model="searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchBtn">搜索</el-button>
                <el-button @click="resetBtn">重置</el-button>

            </el-form-item>
        </el-form>

        <!--    表格表单-->
        <el-table :data="countTableList">
            <el-table-column prop="questionImg" width="80" align="center" label="问卷图片">
                <template slot-scope="scope">
                    <el-image
                            style="width: 50px; height: 50px; border-radius: 50%"
                            :src="scope.row.questionImg"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="questionTitle" label="问卷标题"></el-table-column>
            <el-table-column prop="questionDesc" label="问卷描述"></el-table-column>
            <el-table-column prop="questionOrder" label="问卷问卷序号"></el-table-column>
            <el-table-column prop="questionStatus" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.questionStatus == '0'" type="danger" size="normal"
                    >关闭
                    </el-tag
                    >
                    <el-tag v-if="scope.row.questionStatus == '1'" type="success" size="normal"
                    >调查中
                    </el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            icon="el-icon-edit"
                            size="small"
                            @click="lookBtn(scope.row)">查看票数
                    </el-button>
                </template>

            </el-table-column>
        </el-table>
        <!--分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="parms.currentPage"
                :page-sizes="[3, 6, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="parms.total">
        </el-pagination>

        <!-- 弹框 -->
        <el-dialog title="票数统计" :visible.sync="dialogTableVisible" :before-close="handleClose" style="line-height: normal">
            <div style="border: none">{{questionTitle }}</div>
            <table style="width: 100%;line-height: 20px" border="1">
                <thead>
                <th>题目</th>
                <th>选项</th>
                <th>票数</th>
                </thead>
                <tbody>
                <template v-for="item in lookTableList">
                    <tr v-for="(m, i) in item.paperChoice" :key="m.chioceId">
                        <td style="width:40%;text-align:center;" v-if='i == 0'
                            :rowspan="item.paperChoice.length">{{item.paperTitle}}
                        </td>
                        <td>{{m.choiceText}}</td>
                        <td>{{m.total}}</td>
                    </tr>
                </template>
                <div style="text-align: center">
                    <el-button @click="dialogTableVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
                    <el-button @click="dialogTableVisible = false">打 印</el-button>
                </div>
                </tbody>
            </table>

        </el-dialog>


    </el-main>
</template>


<script>
    import axios from "axios";

    export default {
        name: "QuestionCount",
        data() {
            return {
                questionTitle: "",
                lookTableList: [],
                oldTableData: [],

                countTableList: [],
                dialogTableVisible: false,
                searchValue: "",
                parms: {
                    currentPage: 1,
                    pageSize: 6,
                    questionTitle: "",
                    total: 0,
                },


            }
        },
        mounted() {
            this.getList(this.parms.currentPage, this.parms.pageSize);
            // console.log(newQuestionTitle);
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(res => {
                        done();
                    })
                    .catch(res => {
                    });

            },
            //重置按钮
            resetBtn() {
                this.searchValue = "";
                this.getList(this.parms.currentPage, this.parms.pageSize);
            },
            //搜索按钮
            searchBtn() {
                let arr = this.oldTableData.filter(v => {
                    return v.questionTitle.indexOf(this.searchValue) !== -1;
                });
                this.countTableList = arr;

                // this.getList(this.parms.currentPage, this.parms.pageSize);
            },
            //弹框确认
            onConfirm() {
                this.addDialog.visible = false;
            },
            //弹框的关闭
            onClose() {
                this.addDialog.visible = false;
            },
            handleSizeChange(val) {
                this.parms.pageSize = val;
                this.parms.currentPage = 1;
                this.getList(this.parms.currentPage, this.parms.pageSize);
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.parms.currentPage = val;
                this.getList(this.parms.currentPage, this.parms.pageSize);

                console.log(`当前页: ${val}`);
            },
            lookBtn(row) {
                console.log(row);
                axios.get("http://localhost:8089/api/question/getTotalList", {
                    params: {
                        questionId: row.questionId
                    }
                })
                    .then(
                        res => {
                            console.log(res)
                            // this.dialogVisible = true;
                            this.dialogTableVisible = true;
                            this.lookTableList = res.data.data.listPaper;
                            this.questionTitle = res.data.data.questionTitle;

                        },
                        error => {
                            console.log(error)
                        }
                    )

            },
            //获取列表
            getList(currentPage, pageSize) {
                axios.get("http://localhost:8089/api/question/list", {
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize,
                    }
                }).then(
                    res => {
                        console.log(res);
                        this.countTableList = res.data.data.records;
                        this.parms.questionTitle = res.data.data.records.questionTitle;
                        this.oldTableData = this.countTableList
                        this.parms.total = res.data.data.total


                    },
                    error => {
                        console.log("失败！", error.message);
                    }
                )

            }
        }
    }
</script>


<style scoped>

</style>
